<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>
		<!-- 订单列表部分 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in  getUnPaidOrderArr" :key="item.id">
				<div class="order-info">
					<p>
						{{ item.business.businessName }}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>{{this.$formatMoney(item.orderTotal, '￥')}}</p>
						<div class="order-info-right-icon" @click="toPay(item.orderId)">去支付</div>
						<i class="fa fa-times" @click="deleteOrder(item.orderId)"></i>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="item in item.list" :key="item.id">
						<p>{{ item.food.foodName }} x {{ item.quantity }}</p>
						<p>{{this.$formatMoney(item.food.foodPrice * item.quantity, '￥')}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>{{this.$formatMoney(item.business.deliveryPrice, '￥')}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h3>已支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in getPaidOrderArr" :key="item.id">
				<div class="order-info">
					<p>
						{{ item.business.businessName }}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>{{this.$formatMoney(item.orderTotal, '￥')}}</p>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet ">
					<li v-for="odItem in item.list" :key="odItem.id">
						<p>{{ odItem.food.foodName }} x {{ odItem.quantity }}</p>
						<p>{{this.$formatMoney(odItem.food.foodPrice * odItem.quantity, '￥')}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>{{this.$formatMoney(item.business.deliveryPrice, '￥')}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<!-- 底部菜单部分 -->
		<FooterPage></FooterPage>
	</div>
</template>

<script>
	import FooterPage from '../components/FooterPage.vue';
	//import { ref, onMounted } from 'vue';

	export default {
		name: 'OrderList',
		components: {
			FooterPage
		},
		data() {
			return {
				orderArr: [],
				user: {}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');

			let url = `/OrdersController/listOrdersByUserId/${this.user.token.token}`;
			this.$axios.get(url)
				.then(response => {
					let result = response.data.result;
					for (let orders of result) {
						orders.isShowDetailet = false;
					}
					this.orderArr = result;
				}).
			catch(error => {
				console.error(error);
			});
		},
		methods: {
			detailetShow(orders) {
				orders.isShowDetailet = !orders.isShowDetailet;
			},
			//对 orderArr 数组进行筛选，只返回 orderState 等于 1 的元素，避免v-if和v-for混用
			// getPaidOrderArr() {
			//   return this.orderArr.filter(item => item.orderState === 1);
			// },
			// getUnPaidOrderArr() {
			//   return this.orderArr.filter(item => item.orderState === 0);
			// }
			toPay(orderId){
				this.$router.push({path:'/payment', query:{orderId: orderId}});
			},
			deleteOrder(orderId){
				let url_deleteOrder = `/OrdersController/deleteOrders/${orderId}`;
				this.$axios.delete(url_deleteOrder)
				.then(response => {
					this.orderArr = response.data.result;
					alert('已删除订单！');
					console.log( response.data.result)
				}).
				catch(error => {
					console.error(error);
				});
				
			}
		},
		//在vue3里面推荐使用computed代替vue2中的过滤器
		computed: {
			// 对 orderArr 数组进行筛选，只返回 orderState 等于 1 的元素，避免v-if和v-for混用
			getPaidOrderArr() {
				return this.orderArr.filter(item => item.orderState === 1);
			},
			getUnPaidOrderArr() {
				return this.orderArr.filter(item => item.orderState === 0);
			}
		}
		// setup() {
		//   const unpaidOrders = ref([]);
		//   const paidOrders = ref([]);
		//   const user = ref({});

		//   const fetchOrders = async () => {
		//     try {
		//       const response = await this.$axios.post('OrdersController/listOrdersByUserId', {
		//         userId: user.value.userId
		//       });
		//       const result = response.data;
		//       result.forEach((orders) => {
		//         orders.isShowDetails = false;
		//       });

		//       // 分离未支付和已支付订单
		//       unpaidOrders.value = result.filter((item) => item.orderState === 0);
		//       paidOrders.value = result.filter((item) => item.orderState === 1);
		//     } catch (error) {
		//       console.error(error);
		//     }
		//   };

		//   const toggleDetails = (orders) => {
		//     orders.isShowDetails = !orders.isShowDetails;
		//   };

		//   onMounted(() => {
		//     //user.value = this.$getSessionStorage('user');
		//     this.user = this.$getSessionStorage('user');
		//     fetchOrders();
		//   });

		//   return {
		//     unpaidOrders,
		//     paidOrders,
		//     toggleDetails
		//   };
		//}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
		/** padding-bottom: 14vw; **/
	}

	.wrapper .order {
		width: 100%;
	}

	.wrapper .order li {
		width: 100%;
	}

	.wrapper .order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order li .order-info .order-info-right {
		display: flex;
	}
	
	.wrapper .order li .order-info i{
		margin-left: 2vw;
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .order li .order-detailet {
		width: 100%;
	}

	.wrapper .order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
